<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://www.layuicdn.com/auto/layui.js" v="2.5.6" e="layui"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
<body>
<form action="" class="layui-form" method="post" lay-filter="dataFrm" id="dataFrm">
    <div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">搜索选择框</label>
        <div class="layui-input-inline">
            <select name="vip_user"  id="sel" lay-filter="test">

            </select>
        </div>
    </div>
        <div class="layui-dv">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-dv">
                <input type="text" name="email"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">联系方式:</label>
            <div class="layui-input-dv">
                <input type="text" name="phone"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-dv">
            <label class="layui-form-label">开始时间:</label>
            <div class="layui-input-dv">
                <input type="text" name="starttime" id="starttime"  readonly="readonly" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">结束时间:</label>
            <div class="layui-input-dv">
                <input type="text" name="endTime" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">会员等级:</label>
            <div class="layui-input-dv">
                <select name="vip_level" lay-verify="">
                    <option value="">请选择一个会员等级</option>
                    <option value="初级会员">初级会员</option>
                    <option value="中级会员">中级会员</option>
                    <option value="高级会员">高级会员</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">性别:</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="sub" lay-submit="">提交</button>
            <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
        </div>
    </div>
</form>


<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        form.render('input')

        $(function () {
            $.ajax({
                type: "post",
                url: "/user/selectusername",
                success: function (data) {
                    var dv=["vrvrv","hhh"]
                    /*var dv = JSON.parse(data);*/
                    for(var i=0;i<dv.length;i++){
                        console.log(dv[i]);
                        $("#sel").append("<option value='"+dv[i]+"' >"+dv[i]+"</option>");
                        form.render('select')
                    }

                }

            })

        })

        form.on('select(test)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象

            var vip_user=data.value
            $.ajax({
                url:"/vip/selectbyname",
                type:"post",
                data:{"vip_user":vip_user},
                success:function (data){
                    var vip_user='';
                    var email='';
                    var phone='';
                    var starttime='';
                    var endTime='';
                    var vip_level='';
                    var sex='';
                    $.each(JSON.parse(data),function (i,n){
                        vip_level=n.vip_level;
                        email=n.email;
                        phone=n.phone;
                        sex=n.sex;
                        starttime=n.starttime;
                        endTime=n.endTime;
                    })
                    form.val('dataFrm', {
                        "vip_level": vip_level // "name": "value"
                        ,"email": email
                        ,"phone": phone
                        ,"sex": sex //复选框选中状态
                        ,"starttime": starttime //开关状态
                        ,"endTime": endTime
                    });

                }


            })
        });


    })
</script>

</body>
</html>